<template> 
    <label class="at-switch atSwitch" :class="{ 'is-disabled': disabled, 'at-switch--wide': hasText, 'is-checked': checked }">
        <div class="at-switch__mask" v-show="disabled"></div>
        <input
            class="at-switch__input"
            type="checkbox"
            @change="handleChange"
            ref="input"
            :name="name"
            :true-value="onValue"
            :false-value="offValue"
            :disabled="disabled">
        <span class="at-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
            <span class="at-switch__button" :style="{ transform }"></span>
        </span>
        <transition name="label-fade">
            <div
                class="at-switch__label at-switch__label--left"
                v-show="checked"
                :style="{ 'width': coreWidth + 'px' }">
            <i :class="[onIconClass]" v-if="onIconClass"></i>
            <span v-if="!onIconClass && onText">{{ onText }}</span>
            </div>
        </transition>
        <transition name="label-fade">
            <div
                class="at-switch__label at-switch__label--right"
                v-show="!checked"
                :style="{ 'width': coreWidth + 'px' }">
                <i :class="[offIconClass]" v-if="offIconClass"></i>
                <span v-if="!offIconClass && offText">{{ offText }}</span>
            </div>
        </transition>
    </label>
</template>
<script>
    export default {
        name:'at-switch',
        componentName: "ElSwitch",
        props: {
            value: {
                type: [Boolean, String, Number],
                default: false
            },
            disabled: {
                type: Boolean,
                default: false
            },
            width: {
                type: Number,
                default: 0
            },
            onIconClass: {
                type: String,
                default: ''
            },
            offIconClass: {
                type: String,
                default: ''
            },
            onText: {
                type: String,
                default: 'ON'
            },
            offText: {
                type: String,
                default: 'OFF'
            },
            onColor: {
                type: String,
                default: ''
            },
            offColor: {
                type: String,
                default: ''
            },
            onValue: {
                type: [Boolean, String, Number],
                default: true
            },
            offValue: {
                type: [Boolean, String, Number],
                default: false
            },
            name: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
            coreWidth: this.width
            };
        },
        created() {
            if (!~[this.onValue, this.offValue].indexOf(this.value)) {
                this.$emit('input', this.offValue);
        }
        },
        computed: {
            checked() {
                return this.value === this.onValue;
            },
            hasText() {
                return this.onText || this.offText;
            },
            transform() {
                return this.checked ? `translate(${ this.coreWidth - 26 }px, 0px)` : 'translate(1px, 0px)';
            }
        },
        watch: {
            checked() {
                this.$refs.input.checked = this.checked;
                if (this.onColor || this.offColor) {
                    this.setBackgroundColor();
                }
            }
        },
        methods: {
            handleChange(event) {
            this.$emit('input', !this.checked ? this.onValue : this.offValue);
            this.$emit('change', !this.checked ? this.onValue : this.offValue);
            this.$nextTick(() => {
                this.$refs.input.checked = this.checked;
            });
            },
            setBackgroundColor() {
                let newColor = this.checked ? this.onColor : this.offColor;
                this.$refs.core.style.borderColor = newColor;
                this.$refs.core.style.backgroundColor = newColor;
            }
        },
        mounted() {
            if (this.width === 0) {
                this.coreWidth = this.hasText ? 72 : 60;
            }
            if (this.onColor || this.offColor) {
                this.setBackgroundColor();
            }
            this.$refs.input.checked = this.checked;
        }
    };
</script>
